<div [ngClass]="{'dark-theme': isDarkTheme | async}" class="mat-dialog-inner-container mat-app-background">

  <h2 mat-dialog-title>Move Torrent(s)</h2>
  <mat-divider></mat-divider>
  <mat-dialog-content class="mat-typography">
    <br/>

    <h3>Save Location</h3>
    <p>Pick a location to move the files to. If none is chosen, the default shown will be used instead.</p>

    <button color="primary" mat-raised-button (click)="openFileSystemExplorerDialog($event)">
      <mat-icon>folder</mat-icon>
      &nbsp; Choose Save Location
    </button>

    <br/>
    <br/>

    <mat-form-field appearance="outline">
      <mat-label>Move To...</mat-label>
      <input value="{{filesDestination}}" name="savepath" type="text" id="savepath" (change)="updateFileDestination($event)" matInput >
      <mat-icon matSuffix>folder_open</mat-icon>
    </mat-form-field>

    <br/>
    <br/>

    <p>Torrents selected: {{torrents.length}} <a id="toggle_torrents" (click)="toggleTorrentsList($event)">(Show/Hide)</a></p>

    <div *ngIf="showListofTorrents">
      <li *ngFor="let tor_name of torrentsToMove()">
        <b>{{tor_name}}</b>
      </li>
    </div>

  </mat-dialog-content>
  <mat-dialog-actions align="end">
    <button disabled={{isLoading}} mat-button [mat-dialog-close]="true">Cancel</button>
    <button disabled={{isLoading}} mat-raised-button (click)="moveTorrents()" color="warn" cdkFocusInitial>Move</button>
  </mat-dialog-actions>
</div>
